<template>
  <div id="center_container">
    <boxconfirm content_title="完成个人认证，可试用背调功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goMember" ref="bboxconfirm"></boxconfirm>
		<boxconfirm content_title="完成企业认证，启用背调全部功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goCompany" ref="bbboxconfirm"></boxconfirm>
    <boxconfirm content_title="需管理员才能充值" content_confirm="去认证" content_cancel="取消" @confirmClick="goMembers" ref="aaa"></boxconfirm>
    <div class="center_userInfo">
      <div class="center_top" :class="headIos?'side-fiios':'side-fixed'">
        <div class="center_top_title">
          <div class="center_title_left">个人中心
            <span class="center_title_right" @click="modifica">
              <img class="center_make_img" src="../../assets/img/center/cener_make.png" alt="">
            </span>
          </div>
        </div>
        <div class="center_middle_info">
          <div class="middle_info_content">
            <img src="../../assets/img/center/user_info_tp.png" alt="" v-if="faceout">
            <img class="user_phone avatar" :src="meinfor.facePhoto" alt="" v-else>
            <div class="user_name">
              <div class="user_real_name">{{ meinfor.realName }}</div>
              <div v-show="wars" class="wardens" :class="meinfor.isManager | filterwardenc(meinfor.isManager)">
                <span>{{meinfor.isManager | filterwarden(meinfor.isManager)}}</span>
              </div>
            </div>
            <div class="user_position">{{ meinfor.position }}</div>
            <div class="center_state_left" v-if="(meinfor.CompanyIsAuth == '0')" @click="cationstate(meinfor.CompanyIsAuth,meinfor.isAuth)">
              <span style="display: inline-block">还未认证完成</span>
              <span class="center_srate_havent">去认证</span>
            </div>
            <div class="center_state_left" v-else-if="(meinfor.CompanyIsAuth == '1')">
                <span style="display: inline-block">{{ meinfor.companyInfoFullName }}</span><span class="getThrough authenticated_preson">已认证</span>
              <!-- <span style="display:inline-block;width:40%;text-align:left;"> -->

              <!-- </span> -->
            </div>
            <div class="center_state_left" @click="cationstate(meinfor.CompanyIsAuth,meinfor.isAuth)" v-else >
              <div>
                <span>
                  {{ meinfor.companyInfoFullName }}

                    <span class="center_state_unpass" :class="meinfor.CompanyIsAuth | filterclass(meinfor.CompanyIsAuth)">{{ meinfor.CompanyIsAuth | filterone(meinfor.CompanyIsAuth) }}</span>

                </span>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center_list">
        <group>
          <div class="embarrassed">
            <div @click="legBalance">
              <cell title="账户余额" is-link class="user_balance_title">
                <span slot="default" class="user_price" >¥ <span>{{ meinfor.totalAmount }}</span>元</span>
                <img class="user_balance" src="../../assets/img/center/center-one.png" slot="icon">
              </cell>
            </div>
          </div>
          <div class="embarrassed">
            <div @click="legSpace" class="embarr">
              <cell title="职说空间" is-link class="user_balance_title">
                <span slot="default" >{{ meinfor.storageNumberByOut + '/' + meinfor.storageNumber }}</span>
                <img class="user_space" src="../../assets/img/center/center-two.png" slot="icon">
              </cell>
            </div>
          </div>
          <div class="embarrassed">
            <div  class="duringmonth"  @click="legShoping">
              <cell title="当月消费" is-link class="user_balance_title">
              <span slot="default">¥ <span>{{ meinfor.sumTotal }}</span>元</span>
              <img class="user_current " src="../../assets/img/center/center-three.png" slot="icon">
              </cell>
            </div>
          </div>
        </group>
        <!-- <group>
          <div @click="invite">
            <cell title="邀请好友" is-link class="user_balance_title">
              <span slot="default"></span>
              <img class="user_friends" src="../../assets/img/center/center-four.png" slot="icon">
            </cell>
          </div>
            <cell title="用户反馈" is-link link="userFeedback" class="user_balance_title">
              <span slot="default" ></span>
              <img class="user_current " src="../../assets/img/center/center-five.png" slot="icon">
            </cell>
        </group> -->
        <div v-if="permins">
          <group>
              <cell title="权限管理" class="user_balance_title" is-link link="setPermissions">
                <span slot="default" ></span>
                <img class="user_current " src="../../assets/img/center/center-seven.png" slot="icon">
              </cell>
          </group>
        </div>
        <group>
            <cell title="设置" class="user_balance_title" is-link link="userSet">
              <span slot="default" ></span>
              <img class="user_current " src="../../assets/img/center/center-six.png" slot="icon">
            </cell>
        </group>
        <div style="width:100%;height:10px;"></div>
      </div>
    </div>

  </div>
</template>

<script>
  import { Cell, Group, Alert, Confirm, XDialog  } from 'vux'
  import { TransferDomDirective as TransferDom } from 'vux'
  import util from '../../libs/util'
  import boxconfirm from '../common/boxconfirm';
  export default {
    name: 'hello',
    directives: {
      TransferDom
    },
    data () {
      return {
        show:false,
        meinfor: {
          totalAmount: 0,
          storageNumberByOut: 0,
          storageNumber: 0,
          sumTotal: 0
        },
        totals: '',
        logstate: '',
        companysid: '',
        sid: '',
        faceout: true,
        weisucc: true,
        permins: false,
        Managers: '',
        headIos: false,
        wars: false
      }
    },
    components: {
      Cell,
      Group,
      Alert,
      Confirm,
      XDialog,
      boxconfirm
    },
    methods: {
      getdata: function() {
        let that = this;
        var url = '/lblsapp-h5/v2/personCenter/personCenterIndex.json';
        util.ajax.post(url).then(function(stats) {
          console.log(stats);
          that.meinfor = stats.data.res.data;
          if(stats.data.res.data.facePhoto){
            that.faceout = false;
          } else {
            that.faceout = true;
          };
          if(stats.data.res.data.CompanyIsAuth == '1'){
            if(stats.data.res.data.isManager == '1') {
              that.permins = true;
            }
          }
          that.sid = stats.data.res.data.isAuth; //个人认证状态
          that.companysid = stats.data.res.data.CompanyIsAuth; // 企业认证状态
          that.Managers = stats.data.res.data.isManager; // 是否是管理员
          if(stats.data.res.data.CompanyIsAuth == '0'){
            that.weisucc = true;
          }else {
            that.weisucc = false;
          }
          if (stats.data.res.data.CompanyIsAuth == '1') {
            that.wars = true;
          }
        }).catch(function(error) {
          console.log(error);
        })
        // if(that.sid == '0'){ //个人未认证 跳个人认证
        //   that.$router.push('/userCertification');
        // } else { // 个人认证
        //   if(that.companysid == '0' || that.companysid == ''){ //企业未认证 跳企业认证
        //     that.$router.push('/userEnterprise');
        //   }
        // };
      },
      userSet() {
        this.$router.push('/userSet');
      },
      modifica() {
        this.$router.push('/userInfo');
      },
      legBalance() { // 余额点击
        if (this.sid == '1') {
          if (this.companysid == '1') {
            if(this.Managers == '1'){ // 添加判断是否为管理员
              this.$router.push('/userRecharge');
            } else {
              this.$refs.aaa.show();
            }
          } else if (this.companysid == '0') {
            // this.$router.push('/userEnterprise');
            this.$refs.bbboxconfirm.show();
          }
        } else {
          this.$refs.bboxconfirm.show();
          // this.$router.push('/userCertification');
        }
      },
      autovalidation(k) {
        if (this.sid == '1') {
          if (this.companysid == '1') {
            this.$router.push('/'+k);
          } else if (this.companysid == '0') {
            this.$refs.bbboxconfirm.show();
          }
        } else {
          this.$refs.bboxconfirm.show();
        }
      },
      legSpace() { // 空间
        // if (that.companysid == '1') {
        //   this.$router.push('/userSpace');
        // }
        this.autovalidation('userSpace');
      },
      invite() { //邀请
        this.autovalidation('userFriends');
      },
      goMember() { this.$router.push('/userCertification'); },
      goMembers() { },
      goCompany() { this.$router.push('/userEnterprise'); },
      legShoping() { //消费
        // if (that.companysid == '1') {
          this.$router.push({ path: '/userParticulars', query: { centerfirst: '1', individual: this.sid, companycer: this.companysid} });
        // }
      },
      cationstate(g,k) {
        if (k == '1') {
          if (g == '0') {
            this.$router.push('/userEnterprise');
          } else if (g == '2') {
            this.$router.push('/userCertificationState');
          } else if (g == '3') {
            this.$router.push('/userUnderreview');
          }
        }else if(k=='0') {
          this.$router.push('/userCertification');
        }else {
          if (g == '0') {
            this.$router.push('/userEnterprise');
          } else if (g == '2') {
            this.$router.push('/userCertificationState');
          } else if (g == '3') {
            this.$router.push('/userUnderreview');
          }else {
            this.$router.push('/userCertification');
          }

        }
      },
    },

    created() {
      this.logstate = this.$cookie.get('mobole'); //获取登陆状态
      if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
        this.headIos = true;
      }
      this.getdata();
    },
    filters: {
      filterone(value, mass) {
        console.log(123);
        if (mass == '2') {
          console.log(654);
          return '未通过';
        } else if (mass == '3') {
          return '审核中'
        } else if (mass == '1'){
          return '已认证'
        }
      },
      filterclass(value, k){
        if (k == '2') {
          return 'through';
        } else if (k == '3') {
          return 'auditing'
        } else if (k == "1"){
          return 'getThrough'
        }
      },
      filterwarden(value, k){
        if(k == '0'){
          return '成员';
        }else if(k == '1'){
          return '管理员';
        }
      },
      filterwardenc(value, k){
        if(k == '0'){
          return 'wardeno';
        }else if(k == '1'){
          return 'wardent';
        }
      }
    },
    watch: {
      // $route: 'getdata'
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  #center_container{
    height:100%;
    width:100%;
    position: relative;
  }
  #center_container .center_top{
    background: url('../../assets/img/center/phone_bj.png') no-repeat;
    width: 100%;
    height: 250px;
    background-size: cover;
    /* position: absolute; */
  }
  #center_container .weui-cell {
    padding: 12px 15px;
  }
  #center_container .weui-cell:before {
    border-top: none;
  }
  #center_container .weui-cells {
    margin-top: 10px;
    border-bottom: none;
  }
  #center_container .weui-cells:before {
    border-top: none;
  }
  #center_container .weui-cells:after {
    border-bottom: none;
  }
  #center_container .weui-cell__hd {
    position: relative;
    top: 2px;
  }
  .cname {
    display: inline-block;
    width: 50%;
    text-align: right;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .side-fiios {
    padding-top: 20px;
  }
  .center_title_left{
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    height: 45px;
    line-height: 45px;
    position: relative;
  }
  .center_title_right{
    position: absolute;
    right: 0;
    width:12%;
  }
  .center_state_unpass{
    display: inline-block;
    height: 1.6rem;
    padding: 0 0.5rem;
    line-height: 1.6rem;
    border-radius: 20px;
    font-size: 1rem;
    top: .2rem;
    text-align: center;
  }
  .center_title_right .center_make_img{
    width: 15px;
    height: 15px;
  }
  .user_phone{
    width: 91px;
    height: 90px;
  }
  .center_state_img{
    width: 50px;
    height: 15px;
  }
  .user_name{
    font-size: 0;
  }
  .user_real_name{
    display: inline-block;
    font-size: 2rem;
  }
  .center_middle_info{
    z-index: 998;
    position: relative;
    top: 25%;
    background-color: #fff;
    height: 148px;
    border-top-left-radius:100%;
    border-top-right-radius:100%;
    width: 110%;
    margin-left: -5%;
    text-align: center;
  }
  .middle_info_content{
    position: absolute;
    top: -45px;
    left: 5%;
    right: 5%;
  }
  .middle_info_content img {
    border-radius: 100%;
  }
  .user_position{
    font-size: 1.2rem;
    color: #808080;
  }
  .center_state_left{
    position: relative;
    font-size: 1.4rem;
    color: #212121;
    margin-top: 10px;
  }
  .authenticated_preson{
    background-color: #56C401;
    color: #fff;
    width: 4.2rem;
    height: 1.6rem;
    line-height: 1.8rem;
    border-radius: 20px;
    font-size: 1rem;
    margin-left: 6px;
    display: inline-block;

  }
  .center_state_rights{
    position: absolute;
    /* float: left; */
    margin-left: 4%;
    display: inline-block;
    width: 4.2rem;
    height: 1.6rem;
    line-height: 1.8rem;
    border-radius: 20px;
    font-size: 1rem;
    top: .2rem;
    text-align: center;
  }
  .center_state_right{
    position: relative;
    margin-left: 4%;
    display: inline-block;
    width: 4.2rem;
    height: 1.6rem;
    line-height: 1.8rem;
    border-radius: 20px;
    font-size: 1rem;
    top: -.1rem;
    text-align: center;
  }
  .auditing {
    background-color: #EDEDED;
    color: #8B8B8B;
  }
  .through {
    background-color: #FF624C;
    color: #fff;
  }
  .getThrough {
    background-color: #56C401;
    color: #fff;
  }
  .center_list{
    /* position: absolute; */
    width: 100%;
    /* top: 255px; */
    margin-top: 15px;
  }
  .user_balance_title{
    font-size: 1.4rem;
    color: #212121;
  }
  #center_container .vux-label{
    margin-left: 10px;
  }
  .user_balance{
    width: 18px;
    height: 18px;
  }
  .user_space{
    width: 18px;
    height: 18px;
  }
  .user_current{
    width: 18px;
    height: 18px;
  }
  .user_friends{
    width: 18px;
    height: 18px;
  }
  #center_container .user_price{
    color:#F89721;
  }
  .center_userInfo {
    overflow: hidden;
    padding: 0 0 55px 0;
  }
  .weui-cells {
    margin-top: 676471em;
  }
  .jeep .weui-cells{
    margin-top: 0;
  }
  .grou .weui-cells {
    margin-top: .676471em;
  }
  .user_base_infor .weui-cells {
    margin-top: 0;
  }
  .user_base_infor .weui-cells:before {
    border-top: none;
    margin-top: 0;
  }
  .particulars_list .weui-cells:before {
    border-top: none;
  }
  .particulars_list .weui-cells {
    margin-top: 0;
  }
  .space_list .weui-cells {
    margin-top: 0;
    font-size: 1.4rem;
  }
  .space_list .weui-cell {
    padding: 13px !important;
  }
  .space_list .weui-cell:before{border-top: none;}
  .certifi_list .weui-cells {
    margin-top: 0;
    font-size: 1.4rem;
    overflow: visible;
  }
  .user_info_list .weui-cells {
    margin-top: 0;
    font-size: 1.4rem;
  }
  .user_info_list .vux-popup-picker-header .vux-popup-picker-header {
    color: #F89721 !important;
  }
  #user_consumption .weui-cells {
    margin-top: 0.8rem;
  }
  .center_srate_havent {
    display: inline-block;
    border: 1px solid #F89721;
    color: #F89721;
    border-radius: 20px;
    font-size: 1rem;
    width: 4.2rem;
    height: 16px;
    line-height: 16px;
    text-align: center;
  }
  #editWarden .weui-cells,#addWarden .weui-cells {
    margin-top: 1px;
  }
  #editWarden .weui-label,#addWarden .weui-label {
    font-size: 1.4rem;
  }
  #user_particulars .site-header .go-back {
    color: #F89721 !important;
  }
  .wardens {
    display: inline-block;
    height: 32px;
    line-height: 32px;
  }
  .wardens span {
    font-size: 1rem;
    display: inline-block;
    width: 4rem;
    height: 15px;
    line-height: 15px;
    position: relative;
    left: 18%;
    top: -3px;
    border-radius: 20px;
  }
  .wardeno span{
    color: #878787;
    border: 1px solid #878787;
  }
  .wardent span{
    color: #F89721;
    border: 1px solid #F89721;
  }
  .embarrassed .embarr {
    border-top: 1px solid #EEEEEE;
  }
  .duringmonth {
    border-top: 1px solid #EEEEEE;
  }
  .embarrassed .weui-cell {
    padding-left: 0;
  }
</style>
